import React from 'react';
import { Drawer } from 'antd';
import { FormattedMessage, useIntl } from 'umi';
import { ProDescriptions } from '@ant-design/pro-components';

type ViewDetailProps = {
  visible: boolean;
  row: Partial<API.RuleListItem>;
  onClose?: () => void;
};

const ViewDetail: React.FC<ViewDetailProps> = (props) => {
  const { visible, row, onClose } = props;
  const intl = useIntl();

  const getColumns = (): any[] => {
    return [
      {
        title: <FormattedMessage id="member.username" />,
        dataIndex: 'username',
      },
      // {
      //   title: <FormattedMessage id="member.nickname" />,
      //   dataIndex: 'nickname',
      // },
      {
        title: <FormattedMessage id="member.realname" />,
        dataIndex: 'realname',
      },
      {
        title: <FormattedMessage id="member.phonenumber" />,
        dataIndex: 'phonenumber',
      },
      {
        title: <FormattedMessage id="member.email" />,
        dataIndex: 'email',
      },
      {
        title: <FormattedMessage id="member.idcard" />,
        dataIndex: 'idcard',
      },
      {
        title: <FormattedMessage id="member.gender" />,
        dataIndex: 'gender',
        valueEnum: {
          1: {
            text: <FormattedMessage id="public.male" />,
          },
          2: {
            text: <FormattedMessage id="public.female" />,
          },
        },
      },
      {
        title: <FormattedMessage id="member.company" />,
        dataIndex: 'company',
      },
      {
        title: <FormattedMessage id="member.position" />,
        dataIndex: 'position',
      },
      {
        title: <FormattedMessage id="member.certificate" />,
        dataIndex: 'certificate',
      },
      {
        title: <FormattedMessage id="public.status" />,
        dataIndex: 'status',
        valueEnum: {
          0: {
            text: <FormattedMessage id="public.enabled" />,
          },
          1: {
            text: <FormattedMessage id="public.disabled" />,
          },
        },
      },

      {
        title: <FormattedMessage id="public.role" />,
        dataIndex: 'auth_groups',
        render: (_: any, record: API.RuleListItem) =>
          record.auth_groups.map((item: any) => item.name).join('，'),
      },
    ];
  };
  const columns = getColumns();
  return (
    <Drawer
      title={
        intl.formatMessage({ id: 'public.view' }) + intl.formatMessage({ id: 'public.member' })
      }
      placement="right"
      size="large"
      onClose={onClose}
      open={visible}
      // maskClosable={false}
    >
      <ProDescriptions
        bordered
        // title={row?.name}
        dataSource={{ ...row }}
        columns={columns}
        column={2}
      />
    </Drawer>
  );
};

export default ViewDetail;
